import {
    cateListApi,
    cateAddApi,
    cateUpdateApi
} from '@/api/cate'
export default {
    name: 'CateEdit',
    props: {
        // 接收父组件传递的数据
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        // 分类名称的唯一性验证
        const checkCatName = (rule, value, callback) => {
            if (this.cateForm.cat_id) {
                console.log('edit')
                    // 修改操作:排除掉自身，因为名字可以不修改，但是修改后的名字不能和其他的重复
                const cat = this.list.find(item => item.cat_id !== this.cateForm.cat_id && item.cat_name === value)
                if (cat && cat.cat_name) {
                    return callback(new Error('分类名称重复'))
                }
            } else {
                // 添加
                const cat = this.list.find(item => item.cat_name === value)
                if (cat && cat.cat_name) {
                    return callback(new Error('分类名称重复'))
                }
            }

            callback()
        }
        return {
            // 控制对话框的显示和隐藏
            cateDialogVisible: false,
            // 表单数据
            cateForm: {
                cat_id: '',
                cat_name: '',
                cat_level: 0,
                cat_pid: 0
            },
            // 表单验证规则
            cateFormRules: {
                cat_name: [{
                    required: true,
                    message: '请输入分类名称',
                    trigger: 'blur'
                }, {
                    validator: checkCatName,
                    trigger: 'blur'
                }]
            },
            cateList: [],
            // 级联菜单的配置选项,以进行数据的适配
            props: {
                label: 'cat_name',
                value: 'cat_id',
                // 是否显示单选按钮
                checkStrictly: true,
                // hover时触发
                expandTrigger: 'hover'
            },
            // 获取选中的父级菜单的id,是一个数组,因为添加的有可能是三级分类，需要获取其一、二级分类
            selectedKeys: []
        }
    },
    created() {
        this.getCateList()
    },
    computed: {
        parents() {
            if (this.cateForm.cat_id) {
                // 编辑操作
                const pids = this.getParentIds(this.list, this.cateForm)

                // [] 代表当前修改的数据就是一级分类
                // [1] [1,3] 代表要修改的数据是二、三级分类
                // 得到要进行数据处理的id
                const id = pids.length ? pids[0] : this.cateForm.cat_id

                // 一级分类的数据添加disabled属性
                const firstCate = this.cateList.find(item => item.cat_id === id)
                firstCate.disabled = true

                // 二级分类数据也添加disabled属性
                firstCate.children.forEach(item => {
                    item.disabled = true
                })
            }
            return this.cateList
        }
    },
    methods: {
        // 打开对话框
        open(row = '') {
            this.cateDialogVisible = true
            if (row) {
                // 修改操作,给当前的表单数据赋值
                this.cateForm.cat_name = row.cat_name
                this.cateForm.cat_id = row.cat_id
                this.cateForm.cat_level = row.cat_level
                this.cateForm.cat_pid = row.cat_pid

                // 把父级的id放到级联菜单选择项的数组中
                this.selectedKeys = this.getParentIds(this.list, row)
                console.log(this.selectedKeys)
            }
        },
        // 获取子级对应的父id的数组
        getParentIds(list, son) {
            // 假设当前的son就是第3级
            // 定义数组变量来保存找到的父id
            const ids = []
            pTree(list, son)

            function pTree(list, son) {
                list.forEach(item => {
                    if (item.cat_id === son.cat_pid) {
                        // 二级
                        ids.push(item.cat_id)

                        // 递归：子级的处理方式和父级的一致
                        pTree(list, item)
                    }
                })
            }

            return ids.reverse()
        },
        // 获取一、二级分类数据
        async getCateList() {
            const res = await cateListApi({
                type: 2
            })
            if (res.meta.status !== 200) return this.$message.error('一二级分类数据获取失败')
            this.cateList = res.data.result

            // console.log(this.cateList)
        },
        // 级联菜单的选中事件
        parentChange() {
            // 获取选中的父级
            if (this.selectedKeys && this.selectedKeys.length >= 1) {
                // 父id:数组的最后一项
                this.cateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                    // level:数组的长度
                this.cateForm.cat_level = this.selectedKeys.length
            }
            // 选中好了后，关闭级联菜单
            this.$refs.cascadeRef.dropDownVisible = false
        },
        // 提交表单数据
        cateSubmit() {
            this.$refs.cateFormRuleForm.validate(async valid => {
                if (!valid) return this.$message.error('数据校验失败')
                if (this.cateForm.cat_id) {
                    // 编辑
                    const res = await cateUpdateApi(this.cateForm.cat_id, this.cateForm.cat_name)
                    if (res.meta.status !== 200) return this.$message.error('修改分类失败')
                    this.$message.success('修改成功')
                } else {
                    // 添加
                    const res = await cateAddApi(this.cateForm.cat_pid, this.cateForm.cat_name, this.cateForm.cat_level)
                    if (res.meta.status !== 201) return this.$message.error('添加分类失败')
                    this.$message.success('添加成功')
                }
                this.cateDialogVisible = false

                // 重新获取一、二级分类数据
                this.getCateList()
                this.$emit('on-cate-add')
            })
        },
        // 重置表单
        resetForm() {
            this.close()
        },
        close() {
            this.$refs.cateFormRuleForm.resetFields()
            this.cateForm.cat_pid = 0
            this.cateForm.cat_id = ''
            this.cateForm.cat_name = ''
            this.cateForm.cat_level = 0
            this.selectedKeys = []
        },
        // 关闭对话框的事件
        closeDialogHandle() {
            this.close()
        }
    }
}